<%@ page import="java.util.List" %>
<%@ page import="com.entity.User" %>
<%@ page import="com.mapper.UserMapper" %>
<%@ page import="com.service.UserService" %>
<%@ page import="org.springframework.test.context.ContextConfiguration" %>
<%@ page import="org.springframework.test.context.junit4.SpringJUnit4ClassRunner" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta name="format-detection" content="telephone=yes"/>

<style>
    p,td,tr,img {
    border: 2px solid darkgray;
    border-radius: 5px;
    }



    </style>


</head>
<body align="center">
<div align="center">
    <img src="" alt="" id="carImg" width="100px">
<table width="50px" >
    <tr>
        <td style="border-radius: 15px">
            <div  style="background-color: blue ;border-radius: 18px;" align="center" valign="top" >
                <label for="file">选择头像</label>
                <input   type="file" name="" id="file" onchange="selectPic(this)" accept="image/png, image/jpeg, image/jpg" style="opacity: 0;">

            </div>
        </td>
        <td> <a href="http://192.168.1.106:8080/demo2_war_exploded/listUsers">刷新</a></td>
    </tr>



</table>

<%--    <form action="addUser" method="post">--%>
<%--        <label>username:</label>--%>
<%--        <input type="text" name="username"><br>--%>
<%--        <label>password:</label>--%>
<%--        <input type="text" name="usernum"/><br>--%>
<%--        <label>base64:</label>--%>
<%--        <input type="text" name="baseSFdata" id="filedata"/><br>--%>
<%--        &lt;%&ndash;    <textarea  rows="20" name="base64data">介绍一下自己</textarea>&ndash;%&gt;--%>
<%--        &lt;%&ndash;    age:<input type="text" name="age"/><br>&ndash;%&gt;--%>
<%--        <input type="submit" value="submit">&nbsp;&nbsp;&nbsp;&nbsp;--%>
<%--    </form> <br>--%>



<form name="myForm" action="addUser" method="post" onsubmit="return validateForm()">


    <table width="300">
        <tr>
             <td width="100">usernum:</td>
            <td><input type="text" name="usernum"><br></td>
         </tr>

    <tr>
        <td width="100">
            username:
        </td>
        <td>
            <input type="text" name="username"/><br>
        </td>

    </tr>
        <tr>
            <td width="100">
                phoneNumber:
            </td>
            <td>
                <input type="text" name="phone"/><br>
            </td>

        </tr>
        <input  hidden="true" type="text" name="baseSFdata" id="filedata" >
    <tr>
        <td colspan="2" align="center">
            <input type="submit" value="submit" style="background-color:blue;color:white;font-size: 150%">
        </td>

    </tr>
</table>
</form>

<table  width="300px" >
    <tr>
        <td align="center">头像</td>
        <td align="center">学号</td>
        <td align="center">姓名</td>
        <td align="center">电话</td>
        <td align="center">操作</td>
    </tr>

    <%
        List<User> userList = (List<User>) request.getAttribute("userList");

//        UserService userService = null;
//        List<User> userList = userService.listUsers();
        for (int i = 0; i < userList.size(); i++) {
            out.print("<tr>");
            out.print("<td align=\"center\">" + "<img src="+ new String(userList.get(i).getBytes()) +" height=\"50px\"></td>");
            out.print("<td align=\"center\">" + userList.get(i).getUsernum()+"</td>");
            out.print("<td align=\"center\">" + userList.get(i).getUsername()+"</td>");
            out.print("<td align=\"center\"> <a href='tel:" + userList.get(i).getPhone()+"'</a> "+userList.get(i).getPhone()+"</td>");
//            out.print("<td>" + userList.get(i).getAge()+"</td>");
            out.print("<td align=\"center\"><a href='deleteUser/"+ userList.get(i).getId()+"'>删除</a></td>");
            out.print("</tr>");
        }
    %>
    
</table>


</div>
</body>
<script type="text/javascript">
    // function inputFile(obj) {
    //
    //     const file = obj.files[0];
    //     var reader = new FileReader();
    //     reader.readAsDataURL(file);
    //     reader.onload = function () {
    //         $("#avatar").attr("src", this.result);
    //     }
    // }

var path;
    function selectPic() {
        var reads= new FileReader();
        fd=document.getElementById("filedata");
        f=document.getElementById('file').files[0];
        path=f;
        reads.readAsDataURL(f);
        reads.onload=function (e) {
            // document.getElementById('carImg').src=this.result;
            fd.value=this.result;
            var data;


            if(this.result.length<1024*1024){
                document.getElementById('carImg').src=this.result;
               fd.value=this.result;

            }else {
                setImagePreview(f);
            }

        };


        if(this.result.length<1024*1024){
            document.getElementById('carImg').src=this.result;

        }else {
            setImagePreview(f);
        }



    }
 //
 //    export const changeImageBase64 = function(url,callback) {
 //        let img = new Image()
 //        // img.crossOrigin = '*'
 //        img.onload = function() {
 //            var canvas = document.createElement('canvas');
 //            var context = canvas.getContext('2d');
 //            // 图片原始尺寸
 //            var originWidth = this.width;
 //            var originHeight = this.height;
 //            // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
 //            var maxWidth = 500;
 //            var maxHeight = 400;
 //            // 目标尺寸
 //            var targetWidth = originWidth,targetHeight = originHeight;
 //            // 图片尺寸超过最大值的限制
 //            if(originWidth > maxWidth || originHeight > maxHeight) {
 //                if(originWidth / originHeight > maxWidth / maxHeight) {
 //                    // 更宽，按照宽度限定尺寸
 //                    targetWidth = maxWidth;
 //                    targetHeight = Math.round(maxWidth * (originHeight / originWidth));
 //                } else {
 //                    targetHeight = maxHeight;
 //                    targetWidth = Math.round(maxHeight * (originWidth / originHeight));
 //                }
 //            }
 //            // canvas对图片进行缩放
 //            canvas.width = targetWidth;
 //            canvas.height = targetHeight;
 //            // 清除画布
 //            context.clearRect(0, 0, targetWidth, targetHeight);
 //            // 图片压缩
 //            /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/
 //            context.drawImage(img, 0, 0, targetWidth, targetHeight);
 //            //压缩后的图片转base64 url
 //            var base64Url = canvas.toDataURL('image/jpeg', 0.92)
 //            callback(base64Url)
 //            canvas = null
 //        }
 //        img.onError = function() {
 //            alert('图片加载失败')
 //        }
 //        img.src = url
 //    }
 //
 //
    /*
 三个参数
 file：一个是文件(类型是图片格式)，
 w：一个是文件压缩的后宽度，宽度越小，字节越小
 objDiv：一个是容器或者回调函数
 photoCompress()
 */
    function photoCompress(file,w,objDiv){
        var ready=new FileReader();
        /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
        ready.readAsDataURL(file);
        ready.onload=function(){
            var re=this.result;
            canvasDataURL(re,w,objDiv)
        }
    }

    function canvasDataURL(path, obj, callback){
        var img = new Image();
        img.src = path;
        img.onload = function(){
            var that = this;
            // 默认按比例压缩
            var w = that.width,
                h = that.height,
                scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
            var quality = 0.5;  // 默认图片质量为0.7
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            // 创建属性节点
            var anw = document.createAttribute("width");
            anw.nodeValue = w;
            var anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);
            ctx.drawImage(that, 0, 0, w, h);
            // 图像质量
            if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                quality = obj.quality;
            }
            // quality值越小，所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality);
            // 回调函数返回base64的值
            callback(base64);
        }
    }

    function setImagePreview(e) {

        // var fileMsg = e.files[0];
        var fileMsg = e;
        if(fileMsg==null){
            return;
        }
        //文件名
        var fileName = fileMsg.name;
        //大小 字节
        var fileSize = fileMsg.size;

        /*调用
        * fileMsg 是input type="file" 的值
        * quality 压缩图片质量 范围是（0-1）
        * base64Codes  就是最终压缩成的图片
        */
        photoCompress(fileMsg, {
            quality: 0.3
        }, function(base64Codes){
            //这里可以一个图片预览 把base64Codes 赋值给img的src即可
            document.getElementById('carImg').src=base64Codes;
            document.getElementById("filedata").value=base64Codes;
        });
    }


    function validateForm() {
        var filedata=document.forms["myForm"]["baseSFdata"].value;
        if (filedata==null||filedata==""){
           // alert("null");
            document.getElementById("filedata").value=document.getElementById("carImg").src;

        }

    }



</script>
</html>
